<template>
  <n-card class="login-board" hoverable>
    <n-tabs :value="tabValue" size="large">
      <n-tab-pane name="signin" tab="登录" @click="tabValue = 'signin'">
        <n-form :model="signinFormValue" :rules="rules.signin" ref="signinFormRef">
          <n-form-item label="用户名" path="user_name">
            <n-input v-model:value="signinFormValue.user_name" />
          </n-form-item>
          <n-form-item label="密码" path="password">
            <n-input type="password" v-model:value="signinFormValue.password" />
          </n-form-item>
        </n-form>
        <n-button type="primary" @click="handleSignin" block>登录</n-button>
      </n-tab-pane>
      <n-tab-pane name="signup" tab="注册" @click="tabValue = 'signup'">
        <n-form :model="signupFormValue" :rules="rules.signup" ref="signupFormRef">
          <n-form-item label="用户名" path="user_name">
            <n-input v-model:value="signupFormValue.user_name" />
          </n-form-item>
          <n-form-item label="密码" path="password">
            <n-input type="password" v-model:value="signupFormValue.password" />
          </n-form-item>
          <n-form-item label="重复密码" path="passwordRepeat">
            <n-input type="password" v-model:value="signupFormValue.passwordRepeat" />
          </n-form-item>
          <n-form-item label="昵称">
            <n-input v-model:value="signupFormValue.nick_Name" />
          </n-form-item>
          <n-form-item label="电话号码" path="tel">
            <n-input v-model:value="signupFormValue.tel" />
          </n-form-item>
        </n-form>
        <n-button type="primary" @click="handleSignup" block>注册</n-button>
      </n-tab-pane>
    </n-tabs>
  </n-card>
</template>
<script setup lang="ts">
import { reactive, ref, toRaw } from "@vue/reactivity";
import { signinService, signupService } from "../../api/loginApi";
import $store from "../../store";
import { $pushRoute, useGlobalMessage, useGlobalRouter } from "../../utils/global";

const signinFormRef: any = ref(null);
const signupFormRef: any = ref(null);
let tabValue = ref('signin');

const signinFormValue = reactive({
  user_name: '',
  password: '',
});
const signupFormValue = reactive({
  user_name: '',
  nick_Name: '',
  password: '',
  passwordRepeat: '',
  tel: '',
});
const passwordValidator = (rule: any, value: any) => {
  if (!signupFormValue.password || !signupFormValue.passwordRepeat) {
    return new Error(`请${signupFormValue.password ? '重复您的密码' : '输入密码'}`);
  }
  if (signupFormValue.password !== signupFormValue.passwordRepeat) {
    return new Error('两次密码输入不一致，请检查后重试');
  }
  return true;
}

const telValidator = (rule: any, value: any) => {
  if (!signupFormValue.tel) return new Error('请输入电话号码');
  if (!/^1\d{10}$/.test(signupFormValue.tel)) return new Error('电话号码格式错误，请检查后重试');
  return true;
}

let rules = {
  signin: {
    user_name: [{
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    }],
    password: [{
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    }],
  },
  signup: {
    user_name: [{
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    }],
    password: [{
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    }],
    passwordRepeat: [{
      required: true,
      validator: passwordValidator,
      trigger: 'blur',
    }],
    tel: [{
      required: true,
      validator: telValidator,
      trigger: 'blur',
    }]
  }
}

function handleSignin() {
  signinFormRef.value.validate((errors: any) => {
    if (errors) {
      errors.forEach((errorArray: any) => {
        errorArray.forEach((err: any) => {
          useGlobalMessage().error(err.message);
        })
      })
      return;
    }
    const source = toRaw(signinFormValue);
    signinService(source, {
      useRaw: false,
    })
      .then((res) => {
        useGlobalMessage().success('登录成功,Cloud米米欢迎您');
        $store.dispatch('setupUserInfo', res.data);
        useGlobalRouter().back();
      })
      .catch(err => {
        console.log(err);
      });
  });
}

function handleSignup() {
  signupFormRef.value.validate((errors: any) => {
    if (errors) {
      errors.forEach((errorArray: any) => {
        errorArray.forEach((err: any) => {
          useGlobalMessage().error(err.message);
        })
      })
      return;
    }
    const source = toRaw(signupFormValue);
    signupService(source, {
      useRaw: false,
    })
      .then(res => {
        useGlobalMessage().success('注册成功！');
        tabValue.value = 'signin';
      })
      .catch(err => {
        console.log(err);
      });
  });
}
</script>
<style scoped>
.login-board {
  width: 476px;
  margin-bottom: 200px;
}
</style>